{% load i18n %}
<!DOCTYPE html>

<html lang="en">

<head>
	<meta name="robots" content="noindex,nofollow">
	<meta charset="utf-8">
	<link rel="icon" type="image/x-icon" href="{{STATIC_URL}}favicon.ico">
	<link href="{{STATIC_URL}}css/bk.{{CSS_SUFFIX}}" rel="stylesheet" type="text/css" />
	<link href="{{STATIC_URL}}assets/bk-icon-2.0/iconfont.css" rel="stylesheet" type="text/css" />
	<link href="{{STATIC_URL}}css/login.{{CSS_SUFFIX}}?v=0.81" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}modal/icon/iconfont.css">
	<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}modal/modal.css">
	<style>
		.geetest_holder.geetest_wind .geetest_logo,
		.geetest_holder.geetest_wind .geetest_success_logo {
			display: none;
		}
	</style>
	<title>{% trans '登录 | 数字化运维平台' %}</title>
</head>

<body>
	<p></p>
	<div class="page-content"
		style="background: url({{ IMG_URL }}img/bg_image.png) center no-repeat; background-size: 100% 100%;">
		<div class="header" style="box-shadow: 0px 0px 6px 0px rgba(12, 34, 65, 0.2)">
			<div class="logo" style="">
				<img style="height:50px" src="{{ IMG_URL }}img/bk_login.png" alt="" />
			</div>
			<div style="margin: 0 30px 0 0">
				<a href="/docs/" i18n="help_center" target="_blank" style="color:#666"
					class="container_header_right_child">帮助中心</a>
				<span class="drop_down" style="color: #666; margin-left: 10px">
					<span class="show_name">简体中文</span>
					<svg t="1622808046517" class="icon" style="margin-left: 5px" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="2424" width="8" height="8">
						<path d="M0.006 284.4l56.597-56.598L512 683.2l455.396-455.397 56.598 56.597L512 796.395z"
							p-id="2425"></path>
					</svg>
					<ul class="drop_down_list">
						<li onclick="chooseLanguage('zh_CN','简体中文')"> <img width="20px"
								src="{{STATIC_URL}}img/logo/zh_CN.png" /> <a>简体中文</a></li>
						<li onclick="chooseLanguage('zh_TW','繁体中文')"> <img width="20px"
								src="{{STATIC_URL}}img/logo/zh_TW.png" /> <a>繁體中文</a></li>
						<li onclick="chooseLanguage('en','English')"> <img width="20px"
								src="{{STATIC_URL}}img/logo/en.png" /> <a>English</a></li>
					</ul>
				</span>
			</div>
		</div>
		<div style='margin-top: 9%;display: flex;flex-direction: column;margin-left: 20%;'>
			<img width="540px" src="{{ IMG_URL }}img/home_top_word.png" alt="">
		</div>
		<div class="left-img" style='margin-left: 20%;margin-top:2%;'>
			<img height="410" width="540" src="{{ IMG_URL }}img/home_page_picture.png" alt="">
		</div>

		{% if mfa != "start" %}
		<div class="login-from" style="margin-top: 5%; box-shadow: 0px 2px 30px 0px rgba(12, 34, 65, 0.2)">
			<div class="login-form-title">
				<div class="login-form-title-box">
					<div i18n="password_login" class="login-form-title-box-btn " data-key="0">密码登录</div>
					<div i18n="LDAP_login" class="login-form-title-box-btn" data-key='1'>LDAP登录</div>
				</div>
			</div>
			<!--密码登录-->
			<div id="form-pwd" data-key="0">
				<div class="logo-title" i18n="password_login_title">
					<!-- <img src="{{STATIC_URL}}img/logo/bk_login.png" height="32" width="311" alt=""> -->
					欢迎使用密码登录
				</div>
				<p class="logo-title1"></p>
				<div class="from-detail" style="margin-top: 0; height: auto; padding-bottom: 10%">
					<form action="{{ app_path }}" method="post" id="login-form" onsubmit="return refresh_token()">
						{% csrf_token %}
						<div class="is-danger-tip">
							{% if error_message %}
							<i class="bk-icon icon-exclamation-circle-shape"></i><span>{{ error_message }}</span>
							{% elif data == '1' and tab_key != '1'  %}
							<i class="bk-icon icon-exclamation-circle-shape"></i><span
								i18n="login_message1">请先完成验证码验证</span>
							{% elif data == '2' and tab_key != '1'  %}
							<i class="bk-icon icon-exclamation-circle-shape"></i><span
								i18n="login_message2">{% trans '账户或者密码错误，请重新输入' %}</span>
							{% elif form.errors or form.non_field_errors  %}
							{% if tab_key != '1'  %}
							<i class="bk-icon icon-exclamation-circle-shape"></i><span
								i18n="password_login_message2">{% trans '账户或者密码错误，请重新输入.' %}</span>
							{% endif %}
							{% endif %}

						</div>
						<div class="form-login" style="padding: 5px 55px 0 56px">
							<div class="user group-control" style="margin-bottom: 8%;width: 270px;">
								<i style="color: #0BA360" class="bk-icon icon-user"></i>
								<input id="user" type="text" name="username" i18n_p="password_login_placeholder1"
									placeholder="{% trans '请输入用户名' %}">
							</div>
							<div class="pwd group-control" style="width: 270px;">
								<i style="color: #0BA360" class="bk-icon icon-lock"></i>
								<input class="password" id="password" type="password" name="password" value=""
									i18n_p="password_login_placeholder2" placeholder="{% trans '请输入用户密码' %}">
							</div>
							<div style="margin-top: 8%">
								<div id="captcha">
									<p id="wait" i18n="wait" class="show">正在加载验证码......</p>
								</div>
							</div>
							<div>
								<input type="hidden" name="next" value="{{ next }}" />
								<input type="hidden" name="app_id" value="{{app_id }}">
							</div>
							<div class="btn-content clearfix" style=";padding-top: 25px">
								<button i18n="password_login_btn" class="login-btn"
									style="width: 270px;border-radius: 22px">{% trans '立即登录' %}</button>
							</div>
							<div class="other_login">
								<div class="other_login_line"></div>
								<div i18n="password_login_other" class="other_login_text">其他登录方式</div>
								<div class="other_login_line"></div>
							</div>
							<div class="qywxbox">
								<div title="企业微信登录" class="qywxbox_enable" data-auth_type="3">
									<img src="{{STATIC_URL}}img/qywx.png" alt="企业微信" data-auth_type="3" /> <span
										data-auth_type="3" i18n="WeChat_Work">企业微信</span>
								</div>
								<!--	                            	<div title="钉钉登录暂未开放" class="qywxbox_disabled" data-auth_type="4">-->
								<!--	                            		<img src="{{STATIC_URL}}img/dingding.png" alt="钉钉" data-auth_type="4" />  <span data-auth_type="4">钉钉</span>-->
								<!--	                            	</div>-->
								<!--	                            	<div title="飞书登录暂未开放" class="qywxbox_disabled" data-auth_type="5">-->
								<!--	                            		<img src="{{STATIC_URL}}img/feishu.png" alt="飞书" data-auth_type="5" />  <span data-auth_type="5">飞书</span>-->
								<!--	                            	</div>-->
								<div title="SSO" class="qywxbox_enable sso_box" data-auth_type="8">
									<img src="{{STATIC_URL}}img/SSO.png" alt="SSO" data-auth_type="8" /> <span
										data-auth_type="8" i18n="SSO">SSO</span>
									<div class="sso_box_content auth_select_box"></div>
								</div>
								<div title="OAuth" class="qywxbox_enable oauth_box" data-auth_type="6">
									<img src="{{STATIC_URL}}img/oauth.png" alt="OAuth" data-auth_type="6" /> <span
										data-auth_type="6" i18n="OAuth">OAuth</span>
									<div class="oauth_box_content auth_select_box"></div>
								</div>
							</div>
						</div>
					</form>

				</div>
			</div>

			<!--LDAP登录-->
			<div id="form-ldap" style="display:none" data-key="1">
				<div class="logo-title" i18n="LDAP_login_title">
					<!-- <img src="{{STATIC_URL}}img/logo/bk_login.png" height="32" width="311" alt=""> -->
					欢迎使用LDAP登录
				</div>
				<div class="from-detail" style="margin-top: 0; height: auto; padding-bottom: 10%;background:#ffffff">
					<form action="{{ app_path }}" method="post" id="login-form" onsubmit="return refresh_token()">
						{% csrf_token %}
						<div class="is-danger-tip">
							{% if data == '1' and tab_key == '1' %}
							<i class="bk-icon icon-exclamation-circle-shape"></i><span
								i18n="login_message1">{% trans '请先完成验证码验证' %}</span>
							{% elif data == '2' and tab_key == '1'  %}
							<i class="bk-icon icon-exclamation-circle-shape"></i><span
								i18n="login_message2">{% trans '账户或者密码错误，请重新输入' %}</span>
							{% elif error_message and tab_key == '1' %}
                                <i class="bk-icon icon-exclamation-circle-shape"></i><span>{{ error_message }}</span>
							{% elif form.errors or form.non_field_errors %}
							<div></div>
							{% if tab_key == '1' %}
							<i class="bk-icon icon-exclamation-circle-shape"></i><span
								i18n="login_message2">{% trans '账户或者密码错误，请重新输入.' %}</span>
							{% endif %}
							{% endif %}
						</div>

						<div class="form-login" style="padding: 5px 55px 0 56px">
							<div class="user group-control" style="margin-bottom: 8%;width: 270px;">
								<i style="color: #0BA360" class="bk-icon icon-code"></i>
								<input hidden id="user" type="select" name="domain" value="" i18n_p="LDAP_login_placeholder1"
									placeholder="{% trans '请输入登录域' %}">
									<div class="select_box select_box_active">
										<div class="select_box_content"><span class="select_box_content_placeholder">请选择登录域</span> <img src="{{STATIC_URL}}img/down.png" /></div>
										<div class="domain_options">
											<div class="no_domain">暂无登录域</div>
										</div>
									</div>
							</div>
							<div class="user group-control" style="margin-bottom: 8%;width: 270px;">
								<i style="color: #0BA360" class="bk-icon icon-user"></i>
								<input id="user" type="text" name="username" i18n_p="LDAP_login_placeholder2"
									placeholder="{% trans '请输入LDAP用户名' %}">
							</div>
							<div class="pwd group-control" style="width: 270px;">
								<i style="color: #0BA360" class="bk-icon icon-lock"></i>
								<input class="password" id="password" type="password" name="password" value=""
									i18n_p="LDAP_login_placeholder3" placeholder="{% trans '请输入密码' %}">
							</div>
							<div style="margin-top: 8%">
								<div id="captcha2">
									<p id="wait2" i18n="wait" class="show">正在加载验证码......</p>
								</div>
							</div>
							<div>
								<input type="hidden" name="next" value="{{ next }}" />
								<input type="hidden" name="app_id" value="{{app_id }}">
								<input type="hidden" name="tab_key" value="1">
							</div>
							<div class="btn-content clearfix" style=";padding-top: 25px">
								<button class="login-btn" style="width: 270px;border-radius: 22px"
									i18n="password_login_btn">{% trans '立即登录' %}</button>
							</div>
							<div class="other_login">
								<div class="other_login_line"></div>
								<div class="other_login_text" i18n="password_login_other">其他登录方式</div>
								<div class="other_login_line"></div>
							</div>
							<div class="qywxbox">

								<div title="企业微信登录" class="qywxbox_enable" data-auth_type="3">
									<img src="{{STATIC_URL}}img/qywx.png" alt="企业微信" data-auth_type="3" /> <span
										data-auth_type="3" i18n="WeChat_Work">企业微信</span>
								</div>
								<!--	                            	<div title="钉钉登录暂未开放" class="qywxbox_disabled" data-auth_type="4">-->
								<!--	                            		<img src="{{STATIC_URL}}img/dingding.png" alt="钉钉" data-auth_type="4" />  <span data-auth_type="4">钉钉</span>-->
								<!--	                            	</div>-->
								<!--	                            	<div title="飞书登录暂未开放" class="qywxbox_disabled" data-auth_type="5">-->
								<!--	                            		<img src="{{STATIC_URL}}img/feishu.png" alt="飞书" data-auth_type="5" />  <span data-auth_type="5">飞书</span>-->
								<!--	                            	</div>-->
								<div title="SSO" class="qywxbox_enable sso_box" data-auth_type="8">
									<img src="{{STATIC_URL}}img/SSO.png" alt="SSO" data-auth_type="8" /> <span
										data-auth_type="8" i18n="SSO">SSO</span>
									<div class="sso_box_content auth_select_box"></div>
								</div>
								<div title="OAuth" class="qywxbox_enable oauth_box" data-auth_type="6">
									<img src="{{STATIC_URL}}img/oauth.png" alt="OAuth" data-auth_type="6" /> <span
										data-auth_type="6" i18n="OAuth">OAuth</span>
									<div class="oauth_box_content auth_select_box"></div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		{% endif %}
		{% if google_auth_status == "3" %}
		<form action="{{ app_path }}" method="post" id="login-form" onsubmit="return refresh_token()">{% csrf_token %}
			<div class="mfa_setting_box">
				<h4>
					<span i18n="MFABing_title">绑定 MFA 设备</span>
					<span class="info" style="margin-left:5px">
						<i style="background:#1890FF;color:#fff;font-size:12px;padding:2px;border-radius:50%;"
							class="bk-icon icon-info"></i>
						<span i18n="MFABing_message1" style="padding-left:3px">管理员已开启强制所有用户绑定MFA功能，请完成以下操作以免影响使用。</span>
					</span>
				</h4>
				<div class="mfa_setting_content">
					<h4 class="step" i18n="MFABing_first_step">
						第一步：获取身份验证器
					</h4>
					<div class="step_one">
						<div class="step_one_action">
							<div class="step_one_action_title" i18n="MFABing_first_action_title">方法1. 安装阿里云、华为云APP</div>
							<div class="step_one_action_box" >
								<div i18n="MFABing_first_action_usage">使用步骤：</div>
								<div i18n="MFABing_first_action_ali">阿里云：打开阿里云APP > 点击“右上角+号”> 选择【虚拟MFA】</div>
								<div i18n="MFABing_first_action_huawei">华为云：打开华为云APP > 点击“我的”> 选择【MFA】</div>
							</div>
						</div>

						<div  class="step_one_action">
							<div class="step_one_action_title"><span i18n="MFABing_first_action_title2">方法2. 微信搜索小程序“腾讯身份验证器”</span> <img style="vertical-align: bottom;" src="{{STATIC_URL}}img/tuijian.png" alt="推荐"  /></div>
							<div class="step_one_action_box">
								<div i18n="MFABing_first_action_usage">使用步骤：</div>
								<div i18n="MFABing_first_action_tx">授权打开“腾讯身份验证器”小程序 > 点击【二维码激活】 > 然后扫描下方“第二步”展示的二维码</div>
							</div>
						</div>
					</div>
					<h4 class="step" i18n="MFABing_second_step">
						第二步：使用阿里云APP、华为云APP、腾讯身份验证器小程序扫描以下二维码
					</h4>
					<div class="step_content">
						<img id="google_auth_pic"
							style="height:120px;padding:0px;border:1px solid #e8e8e8;margin:0 0 0 100px;" src=""
							alt="" />
						<div style="margin:0 0 0 20px;font-size:12px;">
							<p i18n="MFABing_second_step_message1">扫不了码？试试账号&密钥方式获取</p>
							<p style="margin:10px 0 10px 0;"><span style="width:50px;display:inline-block;"
									i18n="MFABing_second_step_account_number">账号：</span><span
									style="color:#333;">{{ username }}</span></p>
							<p style="width:280px;word-break: break-word;display:flex;">
								<span style="flex:0 0 50px;" i18n="MFABing_second_step_secret_key">密钥：</span>
								<span>{{ secret }}<a onclick="copy()"
										style="margin:0 0 0 10px;color:#0ba360;cursor:pointer"
										i18n="MFABing_second_step_copy">复制</a> </span>
							</p>
						</div>
					</div>
					<h4 class="step">
						<span i18n="MFABing_third_step">第三步：输入授权码</span> <input
							i18n_p="MFABing_third_authorization_code" placeholder="请输入6位授权码" name="verify_code"
							type="text" />
					</h4>
					<input id="copy"  style="position:absolute;z-index:-10;opacity: 0;" value="{{ secret }}" />
					<div class="is-danger-tip">
						{% if bind_google_auth and bind_google_auth.code != 200 %}
						<i class="bk-icon icon-exclamation-circle-shape"></i><span
							i18n="MFABing_message2">{% trans '认证失败，请检查您的验证码是否正确' %}</span>
						{% endif %}
					</div>
				</div>
				<footer>
					<button i18n="MFABind_submit">确定绑定</button>
				</footer>
				<div>
					<input type="hidden" name="google_auth_type" value="bind_google_auth" />
					<input type="hidden" name="secret" value="{{ secret }}">
					<input type="hidden" name="username" value="{{ username }}" />
					<input type="hidden" name="password" value="{{ password }}">
					<input type="hidden" name="next" value="{{ next }}" />
					<input type="hidden" name="app_id" value="{{app_id }}">
					<input type="hidden" name="geetest_challenge" value="{{ geetest_challenge }}">
					<input type="hidden" name="geetest_seccode" value="{{ geetest_seccode }}">
					<input type="hidden" name="geetest_validate" value="{{ geetest_validate }}">
					<input type="hidden" name="google_auth_url" value="{{ google_auth_url }}">
				</div>
			</div>
		</form>
		{% else %}
		{% if mfa == "start" %}
		<!--LDAP动态码输入-->
		<div class="login-from" style="margin-top: 8%; box-shadow: 0px 2px 30px 0px rgba(12, 34, 65, 0.2);">
			<form action="{{ app_path }}" method="get" id="login-form" onsubmit="return refresh_token()">
				<input type="hidden" id="mfa" name="mfa" value="{{ mfa }}">
				<input type="hidden" name="c_url" value="{{c_url}}">
				<button id="mfaBtn">
					<i style="color: #0ba360" class="bk-icon icon-arrows-left"></i>
					<span i18n="back_btn">返回</span></button>
			</form>
			<form action="{{ app_path }}" method="post" id="login-form" onsubmit="return refresh_token()">
				{% csrf_token %}

				<div class="ldap-icon">
					<img src="{{STATIC_URL}}img/ldap-icon.png" />
				</div>
				<div class="ldap-box">

					<div class="ldap-title" i18n="MFA_title1">账号保护已开启，请根据提示完成以下操作</div>
					{% if google_auth_status != "7" %}
					<div class="ldap-step">
						<div class="ldap-step-num" i18n="MFA_first_step">第一步：</div>
						<div class="ldap-step-desc" i18n="MFA_first_message">请使用阿里云APP、华为云APP、微信搜索小程序腾讯身份验证器三种方式获取动态验证码</div>
					</div>
					<div class="ldap-step">
						<div class="ldap-step-num" i18n="MFA_second_step">第二步：</div>
						<div class="ldap-step-desc" i18n="MFA_second_message">请输入6位动态码</div>
					</div>
					{% endif %}
					<div class="form-login" style="padding: 0;margin-bottom:20px">
						<div class="user group-control" style="margin-bottom: 8%;width:100%">

							{% if google_auth_status == "7" %}
							<div style="text-align:center;margin-top:90px" i18n="MFA_message1">您已开启7天免认证登录，请点击确定按钮直接登录！
							</div>
							<input hidden type="number" name="verify_code" value="123123" i18n_p="MFA_dynamicCode"
								placeholder="请输入6位动态码" />

							{% else %}
							<input style="padding-left:10px" type="number" name="verify_code" i18n_p="MFA_dynamicCode"
								placeholder="请输入6位动态码" />
							{% endif %}

							{% if check_status == False %}
							<span style="color:red;font-size:13px;display:inline-block;margin:5px 0"
								i18n="MFA_message2">{% trans '请确认您的验证码是否正确' %}</span>
							{% endif %}
						</div>
						{% if google_auth_status != "7" %}
						<div style="margin:50px 0 0 0">
							<input name="seven_days_free" type="checkbox" value="1" /> <span
								i18n="MFA_laissez_passer">7天内免验证</span>
						</div>
						{% endif %}
						<div class="btn-content clearfix" style=";padding-top: 20px">
							<button class="login-btn" style="width: 100%;border-radius: 22px"
								i18n="MFA_submit">{% trans '确定' %}</button>
						</div>
						<div style="color:grey;font-size:12px;padding-top:10px" i18n="MFA_message3">
							如无法提供安全码，请联系管理员解除双因素验证后继续操作。</div>
					</div>
					<input type="hidden" name="next" value="{{ next }}" />
					<input type="hidden" name="app_id" value="{{ app_id }}">
					<input type="hidden" name="geetest_challenge" value="{{ geetest_challenge }}">
					<input type="hidden" name="geetest_seccode" value="{{ geetest_seccode }}">
					<input type="hidden" name="geetest_validate" value="{{ geetest_validate }}">
					<input type="hidden" name="username" value="{{ username }}" />
					<input type="hidden" name="password" value="{{ password }}">
				</div>
			</form>
		</div>
		{% endif %}
		{% endif %}

		<footer class="footer">
			<!-- <p>
				<a href="#" target="_blank" hotrep="hp.footer.feedback" class="link">Copyright © 2012-2020 OpsAny. All
					Rights Reserved.</a>
			</p> -->
			<!-- <p>Copyright © 2012-2020 womaiyun. All Rights Reserved.</p> -->
		</footer>
	</div>
	<input hidden id="tab_key" value="{{tab_key}}"></input>
	<div class="error-message-content is-chrome">
		<span i18n="Chrome">{% trans '您的浏览器非Chrome，建议您使用最新版本的Chrome浏览，以保证最好的体验效果' %}</span><i
			class="bk-icon icon-close-circle-shape" id="close-chrome"></i>
	</div>

	<div class="m-modal__wrapper" id="m-modal__wrapper">
		<div class="m-modal__container">
			<div class="m-modal__header">
				<div class="m-modal__title" id="m-modal__title"></div>
				<button class="m-modal__headerbtn">
					<i class="m-modal__close iconfont icon-close" id="m-modal__close"></i>
				</button>
			</div>
			<div class="m-modal__body">
				<div id="qywxCode"></div>
			</div>
		</div>
	</div>

</body>
<!-- js 国际化 -->
<script type="text/javascript" src="{{SITE_URL}}jsi18n/i18n/"></script>
<script src="{{STATIC_URL}}assets/jquery-3.6.1.min.js"></script>
<script src="{{STATIC_URL}}assets/gt.js"></script>
<script src="{{STATIC_URL}}js/login.{{JS_SUFFIX}}?v={{STATIC_VERSION}}"></script>
<script src="{{STATIC_URL}}js/language.js"></script>
<!-- 企业微信-->
<script src="https://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js" type="text/javascript" charset="utf-8"
	defer></script>
<script>
	let key = $('#tab_key').val() || 0
	let OAuthList = []
	let SSOList = []
	//控制展示和隐藏哪个tab里面的内容
	function showTabItem() {
		for (let item of showItem) {
			$(item).hide()
			$(showItem[key]).show()
		}
	}

	//初始化企业微信二维码
	function initWwlogin(appid, agentid, redirect_uri) {
		window.WwLogin({
			id: "qywxCode",
			appid, //企业微信的cropID，在 企业微信管理端->我的企业中查看 - 
			agentid, //企业微信当前应用ID - 
			redirect_uri: encodeURI(redirect_uri), //回调地址 - 
			state: ''
		});
	}


	//获取url参数
	function getQueryVariable(variable) {
		var query = window.location.search.substring(1);
		var vars = query.split("&");
		for (var i = 0; i < vars.length; i++) {
			var pair = vars[i].split("=");
			if (pair[0] == variable) {
				return pair[1];
			}
		}
		return (false);
	}

	//获取OAuth列表
	function getOAuthList() {
		$.ajax({
			url: "accounts/get_auth_config/?auth_type=6",
			type: "get",
			dataType: "json",
			success: function (res) {
				if (res.code == '00' && res.result) {
					OAuthList = res.data.data || []
					if (res.data.data.length) {
						let html = ''
						res.data.data.forEach(item => {
							let origin = window.location.origin
							html +=
								`<div title="${item.enable?item.name:'当前认证未启用'}" class="${item.enable?'oauth_auth_item':'disabled_auth'}" data-key="${item.id}"> <img src="${origin}/${item.auth_icon.url}"></img> <span>${item.name}</span></div>`
						})
						$('.oauth_box_content').html(html)
						$('.oauth_auth_item').on('click', function (e) {
							let key = $(e.currentTarget).data('key')
							const activeAuth = OAuthList.find(item => item.id == key)
							const url = activeAuth.auth_login_url +
								`?response_type=accessCode&client_id=${activeAuth.app_id}&redirect_uri=${window.location.origin}${window.location.pathname}?domain=${activeAuth.domain}%26auth_type=6`
							window.location.href = url
						})

					} else {
						$('.oauth_box').attr('title', '暂未开启OAuth登录')
						$('.oauth_box').addClass('qywxbox_disabled')

					}
				} else {
					$('.oauth_box').attr('title', '暂未开启OAuth登录')
					$('.oauth_box').addClass('qywxbox_disabled')
				}
			},
			error: function (e) {
				$('.oauth_box').attr('title', '暂未开启OAuth登录')
				$('.oauth_box').addClass('qywxbox_disabled')
			},
		});
	}

	//获取SSO列表
	function getSSOList() {
		$.ajax({
			url: "accounts/get_auth_config/?auth_type=8",
			type: "get",
			dataType: "json",
			success: function (res) {
				if (res.code == '00' && res.result) {
					SSOList = res.data.data || []
					if (res.data.data.length) {
						let html = ''
						res.data.data.forEach(item => {
							let origin = window.location.origin
							html +=
								`<div title="${item.enable?item.name:'当前认证未启用'}" class="${item.enable?'sso_auth_item':'disabled_auth'}" data-key="${item.id}"> <img src="${origin}/${item.auth_icon.url}"></img> <span>${item.name}</span></div>`
						})
						$('.sso_box_content').html(html)
						$('.sso_auth_item').on('click', function (e) {
							let key = $(e.currentTarget).data('key')
							const activeAuth = SSOList.find(item => item.id == key)
							const url = activeAuth.auth_login_url +
								`?callback=${window.location.origin}${window.location.pathname}?domain=${activeAuth.domain}%26auth_type=8`
							window.location.href = url
						})

					} else {
						$('.sso_box').attr('title', '暂未开启SSO登录')
						$('.sso_box').addClass('qywxbox_disabled')

					}
				} else {
					$('.sso_box').attr('title', '暂未开启SSO登录')
					$('.sso_box').addClass('qywxbox_disabled')
				}
			},
			error: function (e) {
				$('.sso_box').attr('title', '暂未开启SSO登录')
				$('.sso_box').addClass('qywxbox_disabled')
			},
		});
	}

	//获取登录域列表
	function getDomainList(){
		$.ajax({
			url: "accounts/get_auth_config/?auth_type=2,7",
			type: "get",
			dataType: "json",
			success:function(res){
				if(res.code == '00' && res.result){
					let domainList = res.data.data || []
					if(domainList.length){
						let html = ''
						domainList.forEach(item => {
							html += `<div class="domain_options_item" title="${item.domain}">${item.domain}</div>`
						})
						$('.domain_options').html(html)
						$('.domain_options_item').on('click',function(e){
							$('.select_box_content span').html($(e.currentTarget).html()).removeClass('select_box_content_placeholder')
						})
						//默认选中第一项
						$('.select_box_content span').html(domainList[0].domain).removeClass('select_box_content_placeholder')
						$('input[name="domain"]').val(domainList[0].domain)
					}else {
						$('.select_box_content span').html('暂无登录域').addClass('select_box_content_placeholder')
						$('input[name="domain"]').val('')
					}
				}
			},
			error:function(e){
				$('.select_box_content span').html('暂无登录域').addClass('select_box_content_placeholder')
				$('input[name="domain"]').val('')
			}
		})
	}

		//处理domain选择
	$('.domain_options').on('click', '.domain_options_item', function (e) {
		$('.select_box_content span').html($(e.target).html())
		$('input[name="domain"]').val($(e.target).html())
		$('.select_box').removeClass('select_box_active')
		setTimeout(() => {
			$('.select_box').addClass('select_box_active')
		}, 0);
	})

	//初始化验证码
	function initCaptch(type) {
		const activeKey = key || 0
		var handler = function (captchaObj) {
			$("#submit").click(function (e) {
				var result = captchaObj.getValidate();
				if (!result) {
					$("#notice").show();
					setTimeout(function () {
						$("#notice").hide();
					}, 2000);
					e.preventDefault();
				}
			});
			if ($('#mfa').val() == 'start' || "{{google_auth_status}}" == 3) return
			// 将验证码加到id为captcha的元素里，同时会有三个input的值用于表单提交
			captchaObj.appendTo(captchaItem[activeKey]);
			captchaObj.onReady(function () {
				$(waitItem[activeKey]).hide();
			});
		};
		$.ajax({
			url: "api/login-register/?t=" + (new Date()).getTime(), // 加随机数防止缓存
			type: "get",
			dataType: "json",
			success: function (data) {
				// 调用 initGeetest 初始化参数
				// 参数1：配置参数
				// 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
				initGeetest({
					gt: data.data.gt,
					challenge: data.data.challenge,
					new_captcha: data.data.new_captcha, // 用于宕机时表示是新验证码的宕机
					offline: !data.data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
					product: "float", // 产品形式，包括：float，popup
					width: "100%",
					lang: type,
				}, handler);
			}
		});
	}
	$('#mfaBtn').on('click', function (e) {
		$('#mfa').val('stop')
	})
	const showItem = ['#form-pwd', '#form-ldap']
	const captchaItem = ['#captcha', '#captcha2'];
	const waitItem = ['#wait', '#wait2']

	//加入class让tab自动选中
	$('.login-form-title-box-btn').each((index, item) => {
		if ($(item)[0].dataset.key == key) {
			$(item).addClass('login-form-title-box-btn-check')
		}
	})


	showTabItem()
	getOAuthList()
	getSSOList()
	getDomainList()
	$('.login-form-title-box-btn').click(e => {
		$('.login-form-title-box-btn').each((index, item) => {
			$(item).removeClass('login-form-title-box-btn-check')
		})
		const btnItem = $(e.target)
		key = btnItem[0].dataset.key
		btnItem.addClass('login-form-title-box-btn-check')
		showTabItem()

		//如果已经切换的时候没有初始化过极验的按钮
		if ($(`${captchaItem[key]} .geetest_holder`).length == 0) {
			initCaptch()
		}
	})


	// console.log("{{ google_auth_url }}")
	$("#google_auth_pic").attr("src", window.location.origin + "/" + "{{ google_auth_url }}")

	function copy() {
		let input = document.getElementById("copy");
		input.select();
		document.execCommand("copy")
	}


	$('.qywxbox').click(e => {
		//3 为企业微信
		//4 为钉钉
		//5 为飞书
		const auth_type = $(e.target).data('auth_type')
		if (auth_type != 3) return
		$('#m-modal__wrapper').css({
			'display': 'block'
		})
		let appid;
		let agentid;
		let c_url = encodeURIComponent(getQueryVariable('c_url') || '')
		let is_from_logout = encodeURIComponent(getQueryVariable('is_from_logout') || '')
		//回调地址 默认回调到登录页 由于此url只允许带一个参数 所以下面注释的方式不起作用
		//let redirect_uri = window.location.origin+`/login/?c_url=${c_url}&is_from_logout=${is_from_logout}&auth_type=${auth_type}`; 
		let redirect_uri = window.location.origin + `/login/?auth_type=${auth_type}`; //回调地址 默认回调到登录页
		$.ajax({
			url: "accounts/get_vx_work_config/",
			type: "get",
			dataType: "json",
			success: function (res) {
				if (res.code == '00' && res.result) {
					appid = res.data.corp_id;
					agentid = res.data.agent_id;
					initWwlogin(appid, agentid, redirect_uri);
				} else {
					$('#m-modal__title').html(`提示`)
					$('#qywxCode').html(`<div>${res.message || '获取参数失败，请重试或联系管理员'}</div>`)
				}
			},
			error: function (e) {
				$('#m-modal__title').html(`提示`)
				$('#qywxCode').html(`<div>获取参数失败，请重试或联系管理员</div>`)
			}
		});
	})

	$('#m-modal__close').click(e => {
		$('#m-modal__wrapper').css({
			'display': 'none'
		})
	})
	//    	console.log(document.cookie)

	let arr = document.cookie.split(";")
	let obj = {}
	arr.map(item => {
		obj[item.split("=")[0].trim()] = item.split("=")[1]
	})
	if (obj.opsany_language == "english") {
		setLanguage("en", "English")
		initCaptch("en")
	} else if (obj.opsany_language == "chinese_traditional") {
		setLanguage("zh_TW", "繁體中文")
		initCaptch()
	} else {
		setLanguage("zh_CN", "简体中文")
		initCaptch()
	}
	
	if(!obj.opsany_language) {
		let exp = new Date()
		exp.setTime(exp.getTime() + 24 * 60 * 60 * 1000)
        	document.cookie = "opsany_language=chinese_simplified" + ";expires=" + exp.toGMTString() + ";path=/;"
    	}

	function setLanguage(type, text) {
		let language = i18n_language[type]
		$(".show_name").html(text)

		let domList = $('*[i18n]');
		domList.map((index, item) => {
			$(item).html(language[item.attributes.i18n.value])
		})

		let pList = $('*[i18n_p]');
		pList.map((index, item) => {
			$(item).attr("placeholder", language[item.attributes.i18n_p.value])
		})

	}


	//切换语言
	function chooseLanguage(type, text) {
		let exp = new Date()
		exp.setTime(exp.getTime() + 24 * 60 * 60 * 1000)
		if (type == "zh_CN") {
			document.cookie = "opsany_language=chinese_simplified" + ";expires=" + exp.toGMTString() + ";path=/;"
		} else if (type == "zh_TW") {
			document.cookie = "opsany_language=chinese_traditional" + ";expires=" + exp.toGMTString() + ";path=/;"
		}
		if (type == "en") {
			document.cookie = "opsany_language=english" + ";expires=" + exp.toGMTString() + ";path=/;"
		}
		location.reload()

	}
</script>

</html>
